<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>数据列表</title>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/table.css"/>
    <style type="text/css">
    .searcheBottom{margin-bottom: 10px;}
    </style>
</head>

<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
    <form>
        <div class="demoTable">
         <div class="layui-inline searcheBottom">
             报表名称：
            <div class="layui-inline">
                <input id="reportName" class="layui-input" name="reportName" autocomplete="off" placeholder="报表名称" />
            </div>
            </div>
            
            <div class="layui-inline searcheBottom">
                创建时间:
                <div class="layui-input-inline">
                    <input class="layui-input" name="startTime" placeholder="请输入开始时间" id="startTime"/>
                </div>
                <div class="layui-input-inline">
                    &nbsp;-&nbsp;
                </div>
                <div class="layui-input-inline">
                    <input class="layui-input" name="endTime" placeholder="请输入结束时间" id="endTime"/>
                </div>
            </div>
            
            <div class="layui-inline searcheBottom">
            <button type="button" class="layui-btn" data-type="reload" id="search">搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button> 
            </div>
        </div>
        </form>
    </blockquote>
        <span style="font-size: 16px;"><b>数据报表</b></span>
        <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
</div>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script type="text/javascript" src="/plugins/layui/lay/modules/util.js"></script>
<script type="text/javascript" src="/js/utils.js"></script>
<script>
layui.config({
	  version: '1515376178709', //为了更新 js 缓存，可忽略
      base: '/js/'
	});
	 
	layui.use(['laydate', 'table', 'jquery', 'element','util'], function(){
	  var laydate = layui.laydate //日期
	  ,table = layui.table //表格
	  ,element = layui.element//元素操作
	  ,util = layui.util
	  ,$=layui.jquery


        //时间选择器
        var start = {
            max: '2099-06-16 23:59:59',
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            value: new Date(),
            show: true
            ,done: function(value){
                end.min = value; //开始日选好后，重置结束日的最小日期
                end.start = value //将结束日的初始值设定为开始日
                $('#startTime').focus();
            }
        };
        var end = {
            max: '2099-06-16 23:59:59',
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            value: new Date(),
            show: true
            ,done: function(value){
                start.max = value; //结束日选好后，重置开始日的最大日期
                $('#endTime').focus();
            }
        };
        $('#startTime').bind('click',function (){
            start.elem = this;
            start.closeStop = this
            laydate.render(start);
        });
        $('#endTime').bind('click',function (){
            end.elem = this;
            end.closeStop = this
            laydate.render(end);
        });

	  //执行一个 table 实例
	  var tableIns=table.render({
	    elem: '#tableId'
	    ,url: '/manage/report/listReport' //数据接口
	    ,page: true //开启分页
        ,method:"post"
	    ,cols: [[ //表头
	      {field: 'id', title: 'ID', sort: true,align:'center'}
	      ,{field: 'reportName', title: '报表名称', align:'center'}
	      ,{field: 'createTime', title: '创建时间', align:'center', sort: true,templet: function(d){
	        if(d.createTime !=null){
                return util.toDateString(d.createTime,'yyyy-MM-dd HH:mm:ss')
            }else {
                return '';
            }
	      }}
	      ,{title:"操作", align:'center',templet: function(d){
	    	   return '<a class="layui-btn layui-btn-xs" href="'+d.filePath+'" download="xaizai" >下载</a>';
	      }}
	    ]]
	  });
	  
	  //搜索
	  $("#search").on("click",function(){
		  tableIns.reload({
				where: {
				    "reportName":$("#reportName").val(),
				    "startTime":startTime.value,
				    "endTime":endTime.value,
				}
				,page: {
				 curr: 1 //重新从第 1 页开始
				  }
			  }); 
	  });

	});
</script>
</body>

</html>